<template>
  <sky-base-page bg-page-color="#fff" padding="2rpx 0" footer-padding="12rpx 32rpx">
    <template #header>
      <view class="record-box">
        <text @tap="toRecode">钻石记录</text>
      </view>
    </template>
    <view class="recharge-page">

      <user-balance ref="userBalanceRef"></user-balance>

      <!-- 充值钻石选择 -->
      <view class="recharge-section">
        <view class="section-title">选择充值钻石</view>

        <!-- 固定钻石选项 -->
        <view class="amount-grid">
          <view
              v-for="(item, index) in amountOptions"
              :key="index"
              class="amount-item"
              :class="{ 'active': selectId === item.id }"
              @click="selectAmount(item.id)"
          >
            <view class="amount-value">¥{{ item.money }}</view>
            <view class="amount-gift">{{ item.content }}</view>
          </view>
        </view>
      </view>
    </view>
    <template #footer>
      <u-button type="primary" shape="circle" text="确 定" @tap="submit"></u-button>
    </template>
  </sky-base-page>
</template>

<script setup>
const userBalanceRef=ref()
// 状态管理
const selectId = ref(''); // 选中的钻石

// 充值钻石选项
const amountOptions = ref();

// 获取充值列表
const getzf_biaoqian_recharge = async () => {
  const res = await qly.api.user.getzf_biaoqian_recharge()
  if (res.code) {
    amountOptions.value = res.data
  } else {
    qly.dialog.apiError(res).catch()
  }
}

// 选择固定钻石
const selectAmount = (id) => {
  selectId.value = id;
};

// 余额记录
const toRecode = () => {
  qly.page.open('/pages/my/record/index')
}

const submit = async () => {
  if (!selectId.value) {
    return qly.dialog.error('请选择充值钻石').catch()
  }

  const res = await qly.api.user.czzs({zf_biaoqian_recharge_id:selectId.value})
  if (res.code===1) {
    console.log('res00',res)
    requestPayment(res.data)
  } else {
    qly.dialog.apiError(res).catch()
  }
}

const requestPayment=(payParams)=>{
  WeixinJSBridge.invoke('getBrandWCPayRequest', {
    ...payParams
  },(res)=>{
    console.log('支付结果res',res)
    if (res.err_msg == "get_brand_wcpay_request:ok"){
      qly.dialog.success('支付成功').catch()

    }else {
      qly.dialog.error('支付失败').catch()
    }
  })
  // uni.requestPayment({
  //   "provider": "wxpay",
  //   "orderInfo": {
  //     "appid": data.appId,  // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
  //     "noncestr": data.nonceStr, // 随机字符串
  //     "package": data.package,        // 固定值
  //     "timestamp": data.timestamp,        // 时间戳（单位：秒）
  //     "sign": data.paySign // 签名，这里用的 MD5/RSA 签名
  //   },
  //   success(res) {
  //     userBalanceRef.value.getUserInfo()
  //     qly.dialog.success('支付成功').catch()
  //   },
  //   fail(e) {
  //     console.log('e',e)
  //     qly.dialog.error('支付失败').catch()
  //   }
  // })
}

onShow(() => {
  getzf_biaoqian_recharge()
})
</script>

<style scoped lang="scss">


/* 充值区域 */
.recharge-section {
  background-color: #fff;
  margin: 16px;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 16px;
}

/* 钻石选择网格 */
.amount-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.amount-item {
  background-color: #F5F7FA;
  border-radius: 8px;
  padding: 16px 0;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.amount-item.active {
  background-color: #E3F2FD;
  border: 2px solid #1E88E5;
  transform: translateY(-2px);
}

.amount-value {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.amount-gift {
  font-size: 11px;
  color: #FF9800;
  margin-top: 4px;
}

.discount-tip text {
  margin-left: 8px;
  line-height: 1.4;
}

.record-box {
  display: flex;
  justify-content: flex-end;
  padding: 10rpx 32rpx 0;
  color: #3C9CFF;
}
</style>
